<template>
  <div class="coupon-send">
    <couponCard :cardId="cardId" @sendCouponInfo="getCouponInfo" />
    <div class="form-box">
      <van-cell-group>
        <van-field
          clearable
          readonly
          custom-style="padding:20rpx 10rpx"
          :border="false"
          type="number"
          label="接收人手机号"
          :placeholder="couponInfo.giving_mobile"
          input-align="right"
        />
      </van-cell-group>
      <van-cell-group>
        <van-field
          clearable
          readonly
          custom-style="padding:20rpx 10rpx"
          :border="false"
          type="number"
          label="接收人昵称"
          :placeholder="couponInfo.giving_name"
          input-align="right"
        />
      </van-cell-group>
      <van-cell-group>
        <van-field
          clearable
          readonly
          custom-style="padding:20rpx 10rpx"
          :border="false"
          type="number"
          label="祝福语"
          :placeholder="couponInfo.blessing"
          input-align="right"
        />
      </van-cell-group>
      <van-cell-group>
        <van-field
          clearable
          readonly
          custom-style="padding:20rpx 10rpx"
          :border="false"
          type="number"
          label="转赠时间"
          :placeholder="couponInfo.giving_time"
          input-align="right"
        />
      </van-cell-group>
    </div>
  </div>
</template>
<script>
import couponCard from "../_coupon/coupon-card";
export default {
  components: {
    couponCard,
  },
  data() {
    return {
      cardId: "",
      couponInfo: {},
    };
  },
  onLoad(options) {
    this.cardId = options.id;
  },
  methods: {
    getCouponInfo(data) {
      this.couponInfo = data;
    },
    onInputName(e) {
      this.nameVal = e.detail;
    },
  },
};
</script>
<style lang="scss">
.coupon-send {
  padding: 30rpx 20rpx;
  box-sizing: border-box;

  .form-box {
    margin-bottom: 40rpx;
  }
  .alert-box {
    font-size: 26rpx;
    color: #f37605;
    display: flex;
    align-items: center;
    background: #fff2e6;
    border-radius: 8rpx;
    padding: 18rpx 20rpx;
    line-height: 36rpx;
    margin-top: 36rpx;
    .tips-icon {
      flex: 0 0 36rpx;
      height: 36rpx;
      background: url(https://media.wxcwy.com/mini/images/notebl_icon@2x.png) no-repeat;
      background-size: 100%;
      margin-right: 8rpx;
    }
  }
  .btn {
    width: 690rpx;
    height: 112rpx;
    line-height: 112rpx;
    background: linear-gradient(
      270deg,
      rgba(44, 172, 255, 1) 0%,
      rgba(40, 123, 252, 1) 100%
    );
    border-radius: 56rpx;
    position: fixed;
    z-index: 999;
    bottom: 40rpx;
    left: 0;
    right: 0;
    margin: auto;
    font-size: 36rpx;
    font-weight: 500;
    text-align: center;
    color: #fff;
  }
}
</style>
